// # 登录对话框-显示
var loginBtn = document.querySelector('header .member > div')
loginBtn.onclick = function(){
    var loginDialog = document.querySelector('section.login') 
    loginDialog.style.visibility = 'visible'
}
// # 登录对话框-隐藏
var loginCloseBtn = document.querySelector('section.login i.icon-close')
loginCloseBtn.onclick = function(){
    var loginDialog = document.querySelector('section.login')
    loginDialog.style.visibility = 'hidden'
}

// # 登录对话框-蓝色区域拖拽
var loginBlueBox = document.querySelector('section.login .menu')
loginBlueBox.onmousedown = function(evt){
    var oldE = evt || window.event
    document.onmousemove = function(evt){
        var e = evt || window.event
        var left = e.clientX - oldE.offsetX
        var top = e.clientY - oldE.offsetY
        // 限制边界
        if(left < 0) left = 0
        if(top < 0) top = 0
        var loginDialog = document.querySelector('section.login .item')
        var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - loginDialog.offsetWidth
        var maxTop = (window.innerHeight || document.documentElement.clientHeight) - loginDialog.offsetHeight
        if (left > maxLeft) left = maxLeft
        if (top > maxTop) top = maxTop
        // 设置行内样式
        loginDialog.style.position = 'absolute'
        loginDialog.style.left = left + 'px'
        loginDialog.style.top = top + 'px'
    }
    document.onmouseup = function(){
        document.onmousemove = null
    }
}

// # 登录倒计时
var num = 60
var loginCaptchaBtn = document.querySelector('section.login .captcha')
loginCaptchaBtn.onclick = function(){
    // 行为验证码
    var captchaObj = document.querySelector('section.captcha')
    captchaObj.style.visibility = 'visible'
    document.querySelector('section.captcha i.icon-close').onclick = function(){
        captchaObj.style.visibility = 'hidden'
    }
    // 获取拖拽按钮绑定鼠标按下事件
    var dragBtn = document.querySelector('section.captcha .drag .btn')
    dragBtn.onmousedown = function(){
        document.onmousemove = function(evt){
            var e = evt || window.event
            var left = e.clientX - (captchaObj.offsetLeft - captchaObj.offsetWidth/2) - dragBtn.offsetWidth
            // 限制边界
            // 同步
            dragBtn.style.left = left + 'px'
            document.querySelector('section.captcha .check img:nth-of-type(2)').style.left = left + 'px'
        }
        document.onmouseup = function(){
            document.onmousemove = null
            // 判断行为验证码结果
            var value = parseInt(dragBtn.style.left)
            // 2 判断 260 ~ 265 之间就倒计时
            if(value >= 260 && value<=265){
                // 隐藏
                captchaObj.style.visibility = 'hidden'  
                // 倒计时
                // 2.1 将页面按钮文字改成【60秒后重发】  
                loginCaptchaBtn.innerText = num +'秒后重发'
                loginCaptchaBtn.disabled = true
                t = setInterval(function(){
                if(num<=1){
                    clearInterval(t)
                    loginCaptchaBtn.innerText = '重新发送'
                    num = 60
                    loginCaptchaBtn.disabled = false
                    return
                }
                num--
                loginCaptchaBtn.innerText = num +'秒后重发'
                },1000)
            }
            dragBtn.style.left = '0px'
            document.querySelector('section.captcha .check img:nth-of-type(2)').style.left = '0px'
        }
    }
    return
}

// # 登录表单验证
var loginSubmitBtn = document.querySelector('section.login .submit')
loginSubmitBtn.onclick = function(){
    var isOK = 0
    // 2.1 获取手机号判断
    var mobileObj = document.querySelector('.mobile')
    if(mobileObj.value == '' || mobileObj.value.length != 11 || !Number(mobileObj.value)){
        document.querySelector('section.login .form > p:nth-of-type(3)').innerText = '手机号格式有误'
    } else {
        isOK++
        document.querySelector('section.login .form > p:nth-of-type(3)').innerText = ''
    }
    // 2.2 获取验证码判断4位必须全部为数字
    var passwordObj = document.querySelector('.password')
    if(passwordObj.value == '' || passwordObj.value.length != 4 || !Number(passwordObj.value)){
        document.querySelector('section.login .form > p:nth-of-type(4)').innerText = '验证码只能是4位纯数字'
    } else {
        isOK++
        document.querySelector('section.login .form > p:nth-of-type(4)').innerText = ''
    }
    // 2.3 都验证成功，弹框表单提交
    if(isOK === 2){
        alert('登录成功')
        mobileObj.value = ''
        passwordObj.value = ''
    }
}




